<template>
	<view>
		<!-- 1 用户 2商家 -->
		<view v-if="newstatue ==1">
			<view>
				<view class="u-page">
					<u-navbar title="共享球室" :title-size="35" :title-bold="true" :immersive="true"
						:background="background" :is-back="false" :border-bottom="false"></u-navbar>
					<view class="header">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/background.png"
							style="width: 100%;height: 250px;">
						</image>
						<view class="message-box">
							<view class="message">
								<view class="message-lf">
									<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/message.png"
										style="width: 180rpx; height: 70rpx;"></image>
								</view>
								<view class="message-rg">
									关注公众号，消息提醒更即时~
								</view>
							</view>
						</view>
						<view class="banner">
							<view class="banner-img">
								<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/banner.png"
									style="width: 100%;height: 240rpx;"></image>
							</view>
						</view>
						<view class="join">
							<view class="joinbox">
								<view class="join-lf" @click="shopkeeper">
									<view class="join-lf-img">
										<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/join.png"
											style="width: 100%;height: 220rpx;"></image>
									</view>
								</view>
								<view class="join-rg">
									<!-- <view class="join-rg-img" @click="balance"> -->
									<view class="join-rg-img">
										<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/chongzhi.png"
											style="width:100%;height: 220rpx;"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="shop">
						<view class="change">
							<view class="change-lf">
								选择店铺开台
							</view>
							<view class="change-rg" @click="Seeall">
								查看全部
							</view>
						</view>
						<view class="shop-item" v-for="item in shopList" @click="opentable(item)">
							<view class="item-lf">
								<view class="lf-img">
									<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/shopimg.png"
										style="width:100%;height: 100%;"></image>
								</view>
							</view>
							<view class="item-rg">
								<view class="title">
									{{item.f_shop_name}}
								</view>
								<view class="rg-center">
									<view class="address">
										{{item.f_address}}
									</view>
									<view class="distance">
										{{item.f_length}}km
									</view>
								</view>
								<!-- 进度条 -->
								<view class="">
									<u-line-progress active-color="#8CFF80" :percent="item.percent"
										:show-percent="false" :height="15">
									</u-line-progress>
								</view>
								<view class="vacancy">
									<view class="vacancy-lf">
										空位：{{item.downNum}}
									</view>
									<view class="vacancy-rg">
										总位：{{item.allNum}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="width: 100%; height: 20px;">
					<u-tabbar v-model="current1" :list="list"></u-tabbar>
				</view>
			</view>
			<u-popup v-model="showpop" mode="center" border-radius="38" :mask-close-able="false">
				<view class="popbox">
					<view class="poptitle">温馨提示</view>
					<view class="pop-cen">尊敬的用户，我们非常重视您的个人隐私。 为了更好地保护您的个人信息，我们需要您同意我们收集、使用和保护您的个人信息。
						我们将严格遵守相关法律法规，保护您的个人信息安全。 如果您同意我们的<span class="xieyi">《用户协议》</span>及<span
							class="xieyi">《隐私政策》</span>，请点击“同意”按钮。如果您不同意，我们将无法为您提供服务。</view>
					<view class="pop-btn" @click="submit">同意</view>
					<navigator open-type="exit" target="miniProgram" class="pop-nobtn">不同意</navigator>
				</view>
			</u-popup>
			<u-modal v-model="show" title="授权" confirm-text="确认" confirm-color="#19C865" :title-style="{color:'black'}"
				@confirm="confirm" :mask-close-able="true" @cancel="cancel">
				<view class="slot-content">
					<button class="mobile" v-if="!tel" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">点击授权手机号</button>
					<view class="mobile" v-if="tel">
						<view class="mobile-p">
							手机号：{{tel}}
						</view>
					</view>
				</view>
			</u-modal>
		</view>
		<view v-if="newstatue ==2">
			<managedata></managedata>
		</view>
	</view>
</template>

<script>
	import homeindex from '@/components/homeindex/homeindex.vue'
	import managedata from '../../pages/managedata/managedata.vue'
	export default {
		components: {
			homeindex,
			managedata
		},
		data() {
			return {
				showpop: false,
				tel: '',
				newstatue: uni.getStorageSync('newstatue') ? uni.getStorageSync('newstatue') : '1',
				identity: '',
				key: 'a6a1caab4b7ee75725f060966185daeb',
				longitude: '', //经度
				latitude: '', //纬度
				shopList: [],
				percent: '',
				background: {
					backgroundColor: 'rgba(0,0,0,0)'
				},
				list: [{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome.png",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/index/index',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/orderindex_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/orderindex.png",
						text: '订单',
						customIcon: false,
						pagePath: '/pages/Ewm/Ewm',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermassage-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermassage.png",
						text: '消息',
						customIcon: false,
						pagePath: '/pages/message/message',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermain-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermain.png",
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/main/main',
					},
				],
				current1: 0,
				show: false,
				userInfo: {}

			}
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				this.showpop = true
				this.getAuthorize()
				this.shop()
				// this.getUserInfo()
				this.newstatue = uni.getStorageSync('newstatue') ? uni.getStorageSync('newstatue') : '1'
				
			} else {
				if (!uni.getStorageSync('phoneNumber')) {
					// this.show = true
				}
				// 在页面加载的时候去判断用户有没有授权地理位置，没授权的话引导用户去设置页手动授权
				this.getAuthorize()
				this.shop()
				this.getUserInfo()
				this.newstatue = uni.getStorageSync('newstatue') ? uni.getStorageSync('newstatue') : '1'
			}

		},
		methods: {
			submit() {
				uni.getUserProfile({
					desc: '用于完善会员资料',
					lang: 'zh_CN',
					success: (res) => {
						this.userInfo = res.userInfo
						// this.userInfo.avatarUrl = this.avatar
						// this.userInfo.nickName = this.name
						uni.login({
							provider: 'weixin',
							success: async (loginRes) => {
								console.log('获取code和用户信息', loginRes.code, JSON.stringify(this
									.userInfo))
								let user_info = JSON.stringify(this.userInfo)
								let code = loginRes.code
								this.$Api.wxLogin({
									code: code,
									user_info: user_info
								}).then(res => {
									console.log(this.userInfo)
									console.log(res, '这是啥')
									uni.setStorageSync('token', res.data.data.opinfo
										.token);
									uni.setStorageSync('userid', res.data.data.opinfo
										.userId);
									uni.setStorageSync('phoneNumber', res.data.data.info
											.f_phone);
									this.showpop = false
									// uni.navigateBack({
									// 	delta: 1
									// })
								}, err => {
									uni.showModal({
										title: 'none',
										content: `${JSON.stringify(err)} fail`
									})
								})
							},
							fail: function(err) {
								uni.showToast({
									icon: 'none',
									title: 'fail2'
								})
							}
						});
					}
				})

			},
			confirm() {
				this.show = false
			},
			cancel() {
				this.show = false
			},
			// 手机号授权
			getPhoneNumber(e) {
				console.log(e.detail.errMsg) // 判断用户是否允许获取手机号
				console.log(e);
				this.$Api.getUserPhone({
					userId: uni.getStorageSync('userid'),
					edata: e.detail.encryptedData,
					iv: e.detail.iv
				}).then(res => {
					console.log(res.data.data.phoneNumber, '获取手机号')
					uni.setStorageSync('phoneNumber', res.data.data.phoneNumber);
					this.tel = res.data.data.phoneNumber

				}, err => {})
			},
			balance() {
				uni.navigateTo({
					url: '/pagesB/balance/balance'
				})
			},
			getUserInfo() {
				//获取用户信息
				this.$Api.getUserInfo({
					userId: uni.getStorageSync('userid'),
				}).then(res => {
					this.UserInfo = res.data.data
					this.identity = res.data.data.f_is_c
					uni.setStorageSync('phoneNumber', res.data.data.f_phone);
					console.log(res.data.data, '成功')
				}, err => {})
			},
			//店铺列表
			shop() {
				this.$Api.shopList({
					type: 3,
					page: 1,
					pageNum: 15,
					lon: this.longitude,
					lat: this.latitude
				}).then(res => {
					uni.setStorageSync('longitude', this.longitude);
					uni.setStorageSync('latitude', this.latitude);
					// this.shopList = res.data.data
					let arr = res.data.data
					this.shopList = arr.map((item) => {
						return {
							...item,
							percent: item.allNum == 0 ? 0 : ((item.allNum - item.downNum) / item.allNum)
								.toFixed(2) * 100
						}
					})
					console.log(this.shopList, 'percent')
				}, err => {})
			},
			// 用户授权
			getAuthorize() {
				const _this = this
				uni.authorize({
					scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
					success(res) {
						_this.getLocation()
					},
					// 授权失败
					fail(err) {
						uni.showModal({
							title: '温馨提示',
							content: '无法获取当前位置，请手动开启授权',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定')
									uni.openSetting({
										success(res) {
											if (res.authSetting['scope.userLocation']) {
												console.log('打开授权设置定位')
												_this.getLocation()
											}
										},
									})
								} else if (res.cancel) {
									console.log('用户点击取消')
								}
							},
						})
					},
				})
			},
			// 获取用户的地理位置，
			getLocation() {
				const _this = this
				uni.getLocation({
					type: 'wgs84',
					altitude: true,
					success(res) {
						console.log(res, '经纬度')
						_this.longitude = res.longitude
						_this.latitude = res.latitude

						_this.$Api.shopList({
							type: 3,
							page: 1,
							pageNum: 15,
							lon: res.longitude,
							lat: res.latitude
						}).then(res => {
							uni.setStorageSync('longitude', _this.longitude);
							uni.setStorageSync('latitude', _this.latitude);
							// _this.shopList = res.data.data
							let arr = res.data.data
							_this.shopList = arr.map((item) => {
								return {
									...item,
									percent: item.allNum == 0 ? 0 : ((item.allNum - item.downNum) /
										item.allNum).toFixed(2) * 100
								}
							})
							console.log(res.data, 'res.data')
						}, err => {})
						//小程序只能获取到位置经纬度，需要借助高德地图的逆解析地址，显示出中文具体城市名字
						// _this.loadCity(res.longitude, res.latitude)
					},
				})
			},
			// 经纬度转具体城市
			// 1）需要用到高德地图的逆地理编码
			// 2）需要当前地理位置的经纬度
			// 3）小程序的key值
			loadCity(longitude, latitude) {
				const _this = this
				uni.request({
					header: {
						'Content-Type': 'application/text',
					},
					//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
					url: 'https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=' +
						longitude +
						',' +
						latitude +
						'&key=' +
						_this.key +
						'&radius=1000&extensions=all',
					success(res) {
						if (res.statusCode === 200) {
							_this.cityName = res.data.regeocode.addressComponent.city
							console.log('获取中文街道地理位置成功', res.data.regeocode.addressComponent)
						} else {
							console.log('获取信息失败，请重试！')
						}
					},
				})
			},
			opentable(item) {
				uni.navigateTo({
					url: '../../pagesB/opentable/opentable?item=' + JSON.stringify(item)
				})
			},
			Seeall() {
				uni.navigateTo({
					url: '../../pagesB/moreshop/moreshop'
				})
			},
			shopkeeper() {
				uni.navigateTo({
					url: '../../pagesB/shopkeeper/shopkeeper'
				})
			}
		},


		mounted() {

		}
	}
</script>

<style lang="scss">
	.xieyi {
		color: #222222;
		font-weight: 600;
	}

	.popbox {
		width: 335px;
		height: 305px;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.poptitle {
			height: 25px;
			color: #222222;
			font-size: 18px;
			font-weight: 600;
			margin-top: 18px;
		}

		.pop-cen {
			color: #737373;
			font-size: 14px;
			padding: 17px;
		}

		.pop-btn {
			width: 280px;
			height: 45px;
			background-color: #4EDB9D;
			color: #ffffff;
			border-radius: 25px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			font-weight: 600;
			letter-spacing: 2px;
		}

		.pop-nobtn {
			// width: 280px;
			height: 45px;
			border-radius: 25px;
			color: #9d9d9d;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			letter-spacing: 2px;
		}
	}

	.slot-content {
		width: 100%;
		height: 60px;
	}

	.mobile {
		height: 35px;
		width: 200px;
		margin-left: 1px;
		border: 1px solid #b9b9b9;
		margin: auto;
		margin-top: 10px;
		border-radius: 26px;
		background: #ffffff;
		font-size: 15px;
		color: #b9b9b9;
		display: flex;
		justify-content: center;
		align-items: center;

		.mobile-p {
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #b9b9b9;
		}
	}

	.header {
		width: 100%;
		height: auto;
		background: linear-gradient(0deg, #F0F3F2 0%, #FFFFFF 100%);

		.banner {
			width: 100%;
			height: 240rpx;
			position: absolute;
			top: 300rpx;

			.banner-img {
				width: 90%;
				height: 240rpx;
				margin: auto;
			}
		}

		.join {
			width: 100%;
			height: 240rpx;
			margin-top: 90rpx;

			.joinbox {
				width: 90%;
				height: 240rpx;
				margin: auto;
				display: flex;
				justify-content: space-between;

				.join-lf {
					width: 63%;
					height: 240rpx;

				}

				.join-rg {
					width: 32%;
					height: 60px;
				}
			}
		}

		.message-box {
			width: 100%;
			height: 70rpx;
			position: absolute;
			top: 200rpx;

			.message {
				margin: auto;
				width: 590rpx;
				height: 70rpx;
				background: #ffffff;
				border-radius: 30rpx;
				display: flex;

				.message-lf {
					width: 200rpx;
					height: 70rpx;
				}

				.message-rg {
					width: 390rpx;
					height: 40rpx;
					margin: auto;
					font-size: 26rpx;
					font-weight: 600;
				}
			}
		}
	}

	.shop {
		width: 100%;
		height: auto;
		background-color: #F0F3F2;
		min-height: 700rpx;

		.shop-item {
			width: 690rpx;
			height: 220rpx;
			// box-shadow: 0px 0px 20rpx 0px rgba(223, 223, 223, 0.3);
			border-radius: 20rpx;
			margin: auto;
			margin-top: 40rpx;
			display: flex;
			background-color: #ffffff;

			.item-lf {
				width: 180rpx;
				height: 220rpx;
				display: flex;
				justify-content: center;
				padding-top: 30rpx;

				.lf-img {
					width: 130rpx;
					height: 130rpx;
				}
			}

			.item-rg {
				width: 500rpx;
				height: 220rpx;

				.title {
					// width: 158rpx;
					height: 40rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
					margin-top: 20rpx;
					width: 230px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.schedule {
					width: 250rpx;
					height: 14rpx;
					background: linear-gradient(90deg, #8CFF80 0%, #5FFF95 100%);
					border-radius: 7rpx 0px 0px 7rpx;
					margin-top: 20rpx;

				}

				.vacancy {
					width: 480rpx;
					height: 40rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;

					.vacancy-lf {}

					.vacancy-rg {}
				}

				.rg-center {
					width: 480rpx;
					height: 50rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;

					.address {
						width: 165px;
						height: 50rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 72rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.distance {
						// width: 87rpx;
						height: 17rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						line-height: 72rpx;
					}
				}
			}
		}

		.change {
			width: 100%;
			height: 60rpx;
			display: flex;
			justify-content: space-between;

			.change-lf {
				// width: 190rpx;
				height: 38rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				line-height: 72rpx;
				margin-left: 36rpx;

			}

			.change-rg {
				width: 120rpx;
				height: 26rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #4EDB9D;
				line-height: 72rpx;
				margin-right: 36rpx;
			}
		}
	}
</style>